import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { Block, View, Image, Text } from '@tarojs/components'
import { useSelector } from 'react-redux'
import changeData from './changeData.wxs'

import apiUrl from '../../../../utils/urls'

import FutianBg from './image/w0.png'
import FutianBgfu from './image/fu.svg'
import FutianBgJianTou from './image/jiantou.png'

import './cardtype.less'

function CardTypeTmpl({ card ,__authorizePhoneStatus}) {
  const [phone, setPhone] = useState('')
  const {
    mobile,
    onlyShowPhoneForExchangeCard
  } = card
  // console.log('authorizeStatus', __authorizePhoneStatus);
  const authorizeStatus = __authorizePhoneStatus && __authorizePhoneStatus.authorizeStatus


  // useEffect(() => {
  //   if (!authorizeStatus) {
  //     const str = changeData.phoneStatus(
  //       mobile,
  //       authorizeStatus,
  //       onlyShowPhoneForExchangeCard
  //     )
  //     setPhone(str)
  //   } else {

  //   }


  // }, [authorizeStatus, mobile, onlyShowPhoneForExchangeCard])


  // 预览大图
  function handleViewHeaderImg(e) {
    if (!card) return

    const { type, index } = e.currentTarget.dataset
    const { cardHeadImage, logoImageUrls } = card

    if (+type === 6) {
      const urls = [cardHeadImage, ...logoImageUrls]
      Taro.previewImage({
        current: urls[index],
        urls
      })
      return
    }
    Taro.previewImage({
      urls: [cardHeadImage]
    })
  }
  if (!card) {
    return null
  }

  return (
    <Block>
      <View className='card-all-box'>
        {/* - 大图模式化  */}
        {card.templateType == 1 && (
          <Block>
            <View className='one-pic'>
              <View className='one-sm-box'>
                <View className='one-img'>
                  <Image
                    mode='aspectFill'
                    onClick={handleViewHeaderImg}
                    data-type='1'
                    src={card.cardHeadImage || apiUrl.defaultCardLogo}
                  ></Image>
                </View>
                <View className='card-msg2'>
                  <View className='card-msg-box'>
                    <View className='msg-box'>
                      <View
                        className={phone.phone ? 'name-job' : 'one-notel'}
                      >
                        <Text className='one-card-name'>
                          {changeData.longStringSplit(card.cardName, 6)}
                        </Text>
                        <Text
                          className='one-role-name'
                          onClick={this.lookrole}
                        >
                          {changeData.longStringSplit(
                            card.cardPosition || '',
                            8
                          )}
                        </Text>
                      </View>
                      {phone.phone && (
                        <View
                          className='one-tel'
                          data-action='call'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </View>
                      )}
                    </View>
                    <View
                      style={'margin-top:' + (phone.phone ? 8 : 0) + 'rpx'}
                      className='com-logo'
                    >
                      <Image src={card.company.logo}></Image>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {card.templateType == 2 && (
          <Block>
            <View className='card-box'>
              <View className='card-img'>
                <View
                  className='card-head'
                  onClick={this.handleViewHeaderImg}
                  data-type='2'
                  style='z-index:100;'
                ></View>
                <Image
                  className='card-head'
                  mode='aspectFill'
                  onClick={this.handleViewHeaderImg}
                  data-type='2'
                  src={card.cardHeadImage || apiUrl.defaultCardLogo}
                ></Image>
                <Image
                  className='card-bg-head'
                  src='https://rtds.szft.gov.cn/gov/mp/images/w1.png'
                ></Image>
                <View className='card-text-box'>
                  <View className='card-com-div'>
                    <Image src={card.company.logo}></Image>
                    {card.company.displayCompanyName}
                  </View>
                  <View className='card-name'>{card.cardName}</View>
                  <View className='card-job'>{card.cardPosition || ''}</View>
                  <View className='card-detail'>
                    {phone.phone && (
                      <View className='card-msg'>
                        <Text
                          data-action='call'
                          className='card-d-text'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </Text>
                        <Image
                          className='card-d-img'
                          src='/src/images/icon-type-2-tel.png'
                        ></Image>
                      </View>
                    )}
                    {card.cardEmail && (
                      <View className='card-msg'>
                        <Text className='card-d-text'>{card.cardEmail}</Text>
                        <Image
                          className='card-d-img'
                          src='/src/images/icon-type-2-email.png'
                        ></Image>
                      </View>
                    )}
                    {card.address && (
                      <View className='card-msg addr'>
                        <Text className='card-d-add'>
                          <Text className='card-addr'>{card.address}</Text>
                        </Text>
                        {card.address && (
                          <Image
                            src='/src/images/icon-type-2-addr.png'
                            className='card-d-img'
                          ></Image>
                        )}
                      </View>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {/*  蓝色第一版  */}
        {card.templateType == 3 && (
          <Block>
            <View className='b-box'>
              <View className='b-sm-box'>
                <Image
                  className='b-sm-bg-img'
                  src='https://rtds.szft.gov.cn/gov/mp/images/w2.png'
                ></Image>
                <View className='b-head-img'>
                  <Image
                    mode='aspectFill'
                    onClick={this.handleViewHeaderImg}
                    data-type='3'
                    className='b-head-img-logo'
                    src={card.cardHeadImage || apiUrl.defaultCardLogo}
                  ></Image>
                </View>
                <View className='b-c-d-box'>
                  <View className='b-com-box'>
                    <Image src={card.company.logo}></Image>
                    {card.company.displayCompanyName}
                  </View>
                  <View className='b-card-name'>{card.cardName}</View>
                  <View className='b-card-job'>
                    {card.cardPosition || ''}
                  </View>
                  <View className='b-bottom-box'>
                    {phone.phone && (
                      <View className='b-tel'>
                        <Image src='/src/images/icon-type-3-tel.png'></Image>
                        <View
                          className='b-text'
                          data-action='call'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </View>
                      </View>
                    )}
                    {card.cardEmail && (
                      <View className='b-tel'>
                        <Image src='/src/images/icon-type-3-email.png'></Image>
                        <View className='b-text'>{card.cardEmail}</View>
                      </View>
                    )}
                    {card.address && (
                      <View className='b-tel'>
                        <Image src='/src/images/icon-type-3-addr.png'></Image>
                        <View className='b-text'>{card.address}</View>
                      </View>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {/* 黑色版本 */}
        {card.templateType == 4 && (
          <Block>
            <View className='b-box'>
              <View className='b-sm-box'>
                <Image
                  className='b-sm-bg-img'
                  src='https://rtds.szft.gov.cn/gov/mp/images/h1.png'
                ></Image>
                <View className='h-sm-box'>
                  <View className='h-com'>
                    <Image className='h-logo' src={card.company.logo}></Image>
                    {card.company.displayCompanyName}
                  </View>
                  <View className='clearfix h-head'>
                    <View className='h-bead-box'>
                      <Image
                        mode='aspectFill'
                        onClick={this.handleViewHeaderImg}
                        data-type='4'
                        src={card.cardHeadImage || apiUrl.defaultCardLogo}
                      ></Image>
                    </View>
                    <View className='h-card-detail'>
                      <View className='h-card-name'>{card.cardName}</View>
                      <View className='h-card-job'>
                        {card.cardPosition || ''}
                      </View>
                    </View>
                  </View>
                  <View className='h-b-detail'>
                    {(phone.phone || '') && (
                      <View className='h-de-list'>
                        <Image
                          className='h-de-img'
                          src='/src/images/icon-type-4-tel.png'
                        ></Image>
                        <View
                          className='h-de-text'
                          data-action='call'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </View>
                      </View>
                    )}
                    {card.cardEmail && (
                      <View className='h-de-list'>
                        <Image
                          className='h-de-img'
                          src='/src/images/icon-type-4-email.png'
                        ></Image>
                        <View className='h-de-text'>{card.cardEmail}</View>
                      </View>
                    )}
                    {card.address && (
                      <View className='h-de-list'>
                        <Image
                          className='h-de-img'
                          src='/src/images/icon-type-4-addr.png'
                        ></Image>
                        <View className='h-de-text'>{card.address}</View>
                      </View>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {card.templateType == 5 && (
          <Block>
            <View className='b-box'>
              <View className='b-sm-box'>
                <Image
                  className='b-sm-bg-img'
                  src='https://rtds.szft.gov.cn/gov/mp/images/w3.png'
                ></Image>
                <View className='h-sm-box'>
                  <View className='w2-com-name'>
                    <Image src={card.company.logo}></Image>
                    {card.company.displayCompanyName}
                  </View>
                  <View className='w2-head-img'>
                    <View className='w2-sm-box'>
                      <Image
                        mode='aspectFill'
                        onClick={this.handleViewHeaderImg}
                        data-type='5'
                        src={card.cardHeadImage || apiUrl.defaultCardLogo}
                      ></Image>
                    </View>
                  </View>
                  <View className='w2-card-detail'>
                    <View className='w2-card-name'>
                      <Text>
                        {changeData.longStringSplit(card.cardName, 6)}
                      </Text>
                    </View>
                    <View className='w2-role-name' onClick={this.lookrole}>
                      <Text>
                        {changeData.longStringSplit(
                          card.cardPosition || '',
                          10
                        )}
                      </Text>
                    </View>
                  </View>
                  <View className='w2-other-detail'>
                    <View className='w2-em-tel'>
                      {phone.phone && (
                        <View
                          className='w2-em'
                          data-action='call'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          <Image src='/src/images/icon-type-5-tel.png'></Image>
                          {phone.phone}
                        </View>
                      )}
                      {card.cardEmail && (
                        <View className='w2-tel'>
                          <Image
                            style='margin-right: 12rpx; transform: translateY(-2rpx)'
                            src='/src/images/icon-type-5-email.png'
                          ></Image>
                          {card.cardEmail}
                        </View>
                      )}
                    </View>
                    {card.address && (
                      <View className='w2-addr'>
                        <Image src='/src/images/icon-type-5-addr.png'></Image>
                        {card.address}
                      </View>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {/* - 三图模式化  */}
        {card.templateType == 6 && (
          <Block>
            <View className='one-pic'>
              <View className='one-sm-box'>
                <View className='three-img'>
                  <View className='left-big-img'>
                    <Image
                      mode='aspectFill'
                      onClick={this.handleViewHeaderImg}
                      data-type='6'
                      data-index='0'
                      src={card.cardHeadImage || apiUrl.defaultCardLogo}
                    ></Image>
                  </View>
                  <View className='right-big-img'>
                    <Image
                      mode='aspectFill'
                      onClick={this.handleViewHeaderImg}
                      data-type='6'
                      data-index='1'
                      src={card.logoImageUrls[0] || apiUrl.defaultCardLogo}
                    ></Image>
                    <View></View>
                    <Image
                      mode='aspectFill'
                      onClick={this.handleViewHeaderImg}
                      data-type='6'
                      data-index='2'
                      src={card.logoImageUrls[1] || apiUrl.defaultCardLogo}
                    ></Image>
                  </View>
                </View>
                <View className='card-msg2'>
                  <View className='card-msg-box'>
                    <View className='msg-box'>
                      <View
                        className={phone.phone ? 'name-job' : 'one-notel'}
                      >
                        <Text className='one-card-name'>
                          {changeData.longStringSplit(card.cardName, 6)}
                        </Text>
                        <Text
                          className='one-role-name'
                          onClick={this.lookrole}
                        >
                          {changeData.longStringSplit(
                            card.cardPosition || '',
                            8
                          )}
                        </Text>
                      </View>
                      {phone.phone && (
                        <View
                          data-action='call'
                          className='one-tel'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </View>
                      )}
                    </View>
                    <View
                      style={'margin-top: ' + (phone.phone ? 8 : 0) + 'rpx'}
                      className='com-logo'
                    >
                      <Image src={card.company.logo}></Image>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {/*  灰色背景  */}
        {card.templateType == 7 && (
          <Block>
            <View className='card-type-gray-bg'>
              <View className='card-info-wrapper'>
                <Image
                  className='card-bg'
                  src='https://rtds.szft.gov.cn/gov/mp/images/noheadw.png'
                ></Image>
                <View className='card-bg-mask'></View>
                <View className='card-info'>
                  <View className='card-header'>
                    <Image
                      className='company-logo-index'
                      src={card.company.logo}
                    ></Image>
                    <Text className='company-name-index'>
                      {card.company.displayCompanyName}
                    </Text>
                  </View>
                  <View className='card-brief'>
                    <View className='salesman-name'>{card.cardName}</View>
                    <View className='job-description'>
                      {card.cardPosition || ''}
                    </View>
                  </View>
                  <View className='card-additional'>
                    {phone.phone && (
                      <View className='telephone info-common'>
                        <Image
                          className='info-icon'
                          src='/src/images/icon-type-5-tel.png'
                        ></Image>
                        <Text
                          className='info-text'
                          data-action='call'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </Text>
                      </View>
                    )}
                    {card.cardEmail && (
                      <View className='email info-common'>
                        <Image
                          className='info-icon'
                          src='/src/images/icon-type-5-email.png'
                        ></Image>
                        <Text className='info-text'>{card.cardEmail}</Text>
                      </View>
                    )}
                    {(card.address ||
                      card.detailed_address ||
                      card.company_addr) && (
                        <View className='address info-common'>
                          <Image
                            className='info-icon'
                            src='/src/images/icon-type-5-addr.png'
                          ></Image>
                          <Text className='info-text'>{card.address}</Text>
                        </View>
                      )}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {/*  大楼背景  */}
        {card.templateType == 8 && (
          <Block>
            <View className='card-type-building one-pic'>
              <View className='card-info-wrapper'>
                <Image
                  className='card-bg'
                  src='https://rtds.szft.gov.cn/gov/mp/images/noheadblack.png'
                ></Image>
                <View className='card-bg-mask'></View>
                <View className='card-info'>
                  <View className='card-header'>
                    <Image
                      className='company-logo-index'
                      src={card.company.logo}
                    ></Image>
                    <Text className='company-name-index'>
                      {card.company.displayCompanyName}
                    </Text>
                  </View>
                  <View className='card-brief'>
                    <View className='salesman-name'>{card.cardName}</View>
                    <View className='job-description'>
                      {card.cardPosition || ''}
                    </View>
                  </View>
                  <View className='card-additional'>
                    {phone.phone && (
                      <View className='telephone info-common'>
                        <Image
                          className='info-icon'
                          src='/src/images/icon-type-5-tel.png'
                        ></Image>
                        <Text
                          className='info-text'
                          data-action='call'
                          onClick={this.handleCardOptions}
                          data-value={phone.phone}
                        >
                          {phone.phone}
                        </Text>
                      </View>
                    )}
                    {card.cardEmail && (
                      <View className='email info-common'>
                        <Image
                          src='/src/images/icon-type-5-email.png'
                          className='info-icon'
                        ></Image>
                        <Text className='info-text'>{card.cardEmail}</Text>
                      </View>
                    )}
                    {card.address && (
                      <View className='address info-common'>
                        <Image
                          src='/src/images/icon-type-5-addr.png'
                          className='info-icon'
                        ></Image>
                        <Text className='info-text'>{card.address}</Text>
                      </View>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
        {/*  自定义名片样式  */}
        {card.templateType == 9 && (
          <Block>
            <View className='b-box'>
              <View className='b-sm-box'>
                <Image src={card.customTemplateUrl}></Image>
              </View>
            </View>
          </Block>
        )}
        {/*  福田政府专用名片  */}
        {card.templateType == 0 && (
          <Block>
            <View className='b-box'>
              <View className='b-sm-box'>
                <Image
                  className='b-sm-bg-img'
                  src={FutianBg}
                ></Image>
                <View className='b-c-d-box'>
                  <View className='b-futian-box'>
                    <Image src={FutianBgfu}></Image>
                    {card.unitName ? card.unitName : card.company.shortName}
                  </View>
                  <View className='b-futian-card-name'>
                    {card.cardName}
                    {card.cardNamePy && (
                      <Text className='b-futian-card-pi'>/</Text>
                    )}
                    <Text className='b-futian-card-name-py'>
                      {card.cardNamePy}
                    </Text>
                  </View>
                  <View className='b-futian-card-postion'>
                    {card.cardPositionTemp.map((item) => {
                      return (
                        <View
                          className='d_flex align_items_center'
                          key={item.this}
                        >
                          <Image src={FutianBgJianTou}></Image>
                          <Text>{item}</Text>
                        </View>
                      )
                    })}
                  </View>
                </View>
              </View>
            </View>
          </Block>
        )}
      </View>
    </Block>
  )
}


export { CardTypeTmpl }